<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>侦听器</title>
        <style type="text/css">
            .wrapper { display: flex ; }
            .wrapper>span { 
                flex-basis: 300px ; 
                border: 1px solid #dedede;
                text-align: right ;
            }
            .wrapper input {
                text-align: right ;
                border: none ;
                outline: none ;
                font-size: 20px ;
                margin-right: 5px ;
            }
        </style>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <h3>侦听器(watcher)</h3>

        <div id="watch-basics">
            <div class="wrapper">
                <span>
                    <input type="text" v-model="dollar" id="dollar">
                    <label for="dollar">USD</label>
                </span>
                <span>
                    <input type="text" v-model="renminbi" id="rmb"> 
                    <label for="rmb">CNY</label>
                </span>
            </div>
        </div>

        <script type="text/javascript">
            const app = Vue.createApp({
                // 为根组件指定 Data Property
                data(){
                    return {
                        dollar: 0 ,
                        renminbi: 0 
                    }
                },
                // 为根组件指定侦听器(watcher)
                watch: {
                    dollar: function( value , old ){
                        console.log( 'dollar: ' , value );
                        this.renminbi = value * 6.3687 ;
                    },
                    renminbi: function( value , old ){
                        console.log( 'old value : ' , old );
                        console.log( 'new value : ' , value );
                        this.dollar = value / 6.3687 ;
                    }
                }
            });
            const vm = app.mount( '#watch-basics' );
            console.log( vm );
        </script>
        
    </body>
</html>